<template>
    <div>
		<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
			<el-form-item label="序号" prop="id">
				<el-input disabled v-model="form.id"></el-input>
			</el-form-item>
			<el-form-item label="样品编号" prop="sample_id">
				<el-input disabled v-model.number="form.sample_id"></el-input>
			</el-form-item>
			<el-form-item label-width="120px" label="领用分装样品？">
			 	<el-switch v-model="dflag" active-text="是" inactive-text="否" />	
			</el-form-item>
			<template v-if="dflag===false">
				<el-row class="mgb20">
					<el-col :span="7">
						<el-form-item label="原始库存量" prop="current_amount">
							<el-input disabled v-model.number="form.current_amount"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="原始规格" prop="size">
							<el-input disabled v-model="form.size"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="领用数量" prop="receipt_amount">
							<el-input-number v-model="form.receipt_amount" :precision="2" :step="0.5" min='0' :max='form.current_amount'></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
			</template>
			<template v-if="dflag===true">
				<el-row class="mgb20">
					<el-col :span="7">
						<el-form-item label="分装库存量" prop="disp_amount">
							<el-input disabled v-model.number="form.disp_amount"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="分装规格" prop="disp_size">
							<el-input disabled v-model="form.disp_size"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="领用数量" prop="receipt_amount">
							<el-input-number v-model="form.receipt_amount" :precision="2" :step="0.5" min='0' :max='form.disp_amount'></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
			</template>
			<el-form-item label="领用目的" prop="reason">
				<el-input v-model="form.reason" type="textarea"></el-input>
			</el-form-item>
			<el-form-item label="项目号" prop="project_id">
				<el-input disabled v-model="form.project_id"></el-input>
			</el-form-item>
			<el-form-item label="储存位置" prop="locale">
				<el-input v-model="form.locale"></el-input>
			</el-form-item>
			<el-form-item label="检测项目" prop="service">
				<!-- <el-input v-model="form.service"></el-input> -->
			  	<el-select v-model="form.service" placeholder="请选择项目">
					<el-option v-for="ser in service" 
						:key="ser.id" 
						:label="ser.service_id+':'+ser.service_name" 
						:value="ser.service_id+':'+ser.service_name" 
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="备注" prop="extra_infos">
				<el-input v-model="form.extra_infos" type="textarea"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="saveEdit(formRef)" >保 存</el-button>
				<el-button type="warning" @click="onReset(formRef)" >重 置</el-button>
			</el-form-item>
		</el-form>
    </div>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance, FormRules, UploadProps } from 'element-plus';
import useService from '../../hooks/Service/useService'
import { onMounted, ref } from 'vue';

const dflag=ref(false)
const { getService } = useService()
const service=ref()
onMounted(()=>{
	getService().then(res=>{service.value=res.data})
})

const props = defineProps({
	data: {
		type: Object,
		required: true
	},
	edit: {
		type: Boolean,
		required: false
	},
	update: {
		type: Function,
		required: true
	}
});
const defaultData = {
	id: '',
	sample_id: '',
	current_amount: 0,
	receipt_amount: 0,
	size: '',
	reason: '',
	project_id: '',
	locale: '',
	service: '',
	extra_info: '',
	dflag:false
}

const form = ref({ ...(props.edit ? props.data : defaultData) });
const rules: FormRules = {
	id: [{ required: true, message: '编号', trigger: 'blur' }],
	sample_id: [{ required: true, message: '样品编号不能为空！', trigger: 'blur' }],
	current_amount: [{ required: true, message: '原始库存量', trigger: 'blur' }],
	disp_amount: [{ required: true, message: '分装库存量', trigger: 'blur' }],
	receipt_amount: [{ required: true, message: '领用量', trigger: 'blur' }],
	reason: [{ required: true, message: '领用目的不能空！', trigger: 'blur' }],
	project_id: [{ required: true, message: '项目编号不能为空！', trigger: 'blur' }],
	service: [{ required: true, message: '检测项目不能为空！', trigger: 'blur' }],
	locale: [{ required: true, message: '储存位置不能为空！', trigger: 'blur' }],
	extra_infos: [{ required: false, message: '备注', trigger: 'blur' }],
};

const formRef = ref<FormInstance>();
const saveEdit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(valid => {
		if (!valid) return false;
		form.value.dflag=dflag.value
		props.update(form.value);
		ElMessage.success('保存成功！');
	});
};

const onReset = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};

</script>

<style scoped>
.el-input-number {
	width: 200px;
}
.el-row {
	margin-bottom: 4px
}
</style>
